<template>
  <div>
    <div class="mt-5">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="供热年度">
          <a-date-picker style="width: 200px" v-model:value="searchForm.year" picker="year" format="YYYY" />
        </a-form-item>
        <a-form-item label="热力卡号">
          <a-input style="width: 200px" v-model:value="searchForm.alipayConsNo" />
        </a-form-item>
        <a-form-item label="住户名称">
          <a-input style="width: 200px" v-model:value="searchForm.holder" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch">查询应收账单</a-button>
        </a-form-item>
        <!-- <a-form-item>
          <a-button type="primary" :icon="h(CodeSandboxOutlined)"
            >合并缴费</a-button
          >
        </a-form-item> -->
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="dataSource" :row-class-name="(_record: any, index: number) =>
        index % 2 === 1 ? 'table-striped' : null
      " :pagination="pagination" :scroll="{ x: 3000, y: 550 }" bordered class="mt-5">
      <template #bodyCell="{ column, text, record }">
        <div v-if="column.dataIndex === 'holder'">
          <span @click="onInfo(record)">{{ text }}</span>
        </div>
        <div v-if="column.dataIndex === 'action'">
          <a-button type="link" @click="payFees(record)" :disabled="record.payFeesBlackList == 1">缴费</a-button>
          <a-button type="link" @click="onOrder(record)">查询</a-button>
          <a-button type="link" @click="onRename(record)">改名</a-button>
        </div>
      </template>
    </a-table>
    <personalDrawer :open="isEdit" @close="isEdit = false" :info="payInfo" />
    <a-modal :open="isRename" title="修改住户名字" @ok="setName" @cancel="isRename = false">
      <a-form layout="inline">
        <a-form-item label="新的住户名称">
          <a-input style="width: 200px" v-model:value="name" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal :open="isOrder" title="支付成功订单" width="1300px" @cancel="isOrder = false">
      <a-table :columns="columns_order" :data-source="orderTableData" :row-class-name="(_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
        " :pagination="false" :scroll="{ x: 3000, y: 550 }"></a-table>
    </a-modal>
    <a-modal :open="isUserInfo" title="用户缴费信息" @cancel="isUserInfo = false" width="600px">
      <a-divider orientation="left">基本信息</a-divider>
      <a-descriptions>
        <a-descriptions-item label="小区名称" :span="2">{{
          stateForm.village
          }}</a-descriptions-item>
        <a-descriptions-item label="房名" :span="2">{{
          stateForm.house
          }}</a-descriptions-item>
        <a-descriptions-item label="热力卡号" :span="2">{{
          stateForm.alipayConsNo
          }}</a-descriptions-item>
        <a-descriptions-item label="楼栋" :span="2">{{
          stateForm.building
          }}</a-descriptions-item>
        <a-descriptions-item label="单元" :span="2">{{
          stateForm.unit
          }}</a-descriptions-item>
        <a-descriptions-item label="楼层" :span="2">{{
          stateForm.floor
          }}</a-descriptions-item>
        <a-descriptions-item label="房间号" :span="2">{{
          stateForm.house
          }}</a-descriptions-item>
        <a-descriptions-item label="用户标签" :span="2">{{
          stateForm.houseRemark
          }}</a-descriptions-item>
        <a-descriptions-item label="住户名称" :span="2">{{
          stateForm.holder
          }}</a-descriptions-item>
        <a-descriptions-item label="性别" :span="2">{{
          stateForm.sex
          }}</a-descriptions-item>
        <a-descriptions-item label="入网时间" :span="2">{{
          stateForm.netDate
          }}</a-descriptions-item>
        <a-descriptions-item label="末端类型" :span="2">{{
          stateForm.endpointType
          }}</a-descriptions-item>
        <a-descriptions-item label="阀门类型" :span="2">{{
          stateForm.valveType
          }}</a-descriptions-item>
        <a-descriptions-item label="楼梯类型" :span="2">{{
          stateForm.elevatorType
          }}</a-descriptions-item>
        <a-descriptions-item label="入住状态" :span="2">{{
          stateForm.checkIn
          }}</a-descriptions-item>
        <!-- <a-descriptions-item label="供热状态" :span="2">{{
          stateForm.heatingStatus
        }}</a-descriptions-item> -->
        <a-descriptions-item label="联系人" :span="2">{{
          stateForm.linkman
          }}</a-descriptions-item>
        <a-descriptions-item label="联系电话" :span="2">{{
          stateForm.holdPhone
          }}</a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{
          stateForm.remark
          }}</a-descriptions-item>
        <a-descriptions-item label="其他电话" :span="2">{{
          stateForm.otherPhone
          }}</a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left">面积信息</a-divider>
      <a-descriptions>
        <a-descriptions-item label="面积名称" :span="2">{{
          stateForm.areaName
          }}</a-descriptions-item>
        <a-descriptions-item label="使用类型" :span="2">{{
          stateForm.houseType
          }}</a-descriptions-item>
        <a-descriptions-item label="收费面积" :span="2">{{
          stateForm.feeArea
          }}</a-descriptions-item>
        <a-descriptions-item label="建筑面积" :span="2">{{
          stateForm.buildingArea
          }}</a-descriptions-item>
        <a-descriptions-item label="阀门厂家" :span="2">{{
          stateForm.valveManufacturer
          }}</a-descriptions-item>
        <a-descriptions-item label="实供面积" :span="2">{{
          stateForm.actualSuppliedArea
          }}</a-descriptions-item>
        <a-descriptions-item label="阀门状态" :span="2">{{
          stateForm.valveStatus
          }}</a-descriptions-item>
        <a-descriptions-item label="阀门编号" :span="2">{{
          stateForm.valveNumber
          }}</a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left">合同信息</a-divider>
      <span>暂无合同信息</span>
      <template #footer>
        <a-button @click="isUserInfo = false">取消</a-button>
        <a-button :icon="h(EditOutlined)" type="primary" @click="isEditInfo = true">修改</a-button>
      </template>
    </a-modal>
    <a-modal :open="isEditInfo" title="修改用户信息" width="650px" @cancel="isEditInfo = false" @ok="editInfo">
      <div style="height: 700px; overflow: auto">
        <a-divider orientation="left">基本信息</a-divider>
        <a-form layout="inline" :label-col="labelCol" :model="stateForm">
          <!-- <a-form-item label="子公司">
            <a-input disabled></a-input>
          </a-form-item> -->
          <a-form-item label="小区名称" name="village">
            <a-input disabled v-model:value="stateForm.village"></a-input>
          </a-form-item>
          <a-form-item label="楼栋" name="building">
            <a-input disabled v-model:value="stateForm.building"></a-input>
          </a-form-item>
          <a-form-item label="单元" name="unit">
            <a-input disabled v-model:value="stateForm.unit"></a-input>
          </a-form-item>
          <a-form-item label="楼层" name="">
            <a-input disabled></a-input>
          </a-form-item>
          <a-form-item label="热力卡号" name="alipayConsNo">
            <a-input v-model:value="stateForm.alipayConsNo" placeholder="请输入热力卡号"></a-input>
          </a-form-item>
          <a-form-item label="房名" name="houseName">
            <a-input v-model:value="stateForm.house" placeholder="请输入房名"></a-input>
          </a-form-item>
          <a-form-item label="房号">
            <a-input v-model:value="stateForm.houseName" placeholder="请输入房号"></a-input>
          </a-form-item>
          <a-form-item label="联系人" name="holder">
            <a-input v-model:value="stateForm.holder" placeholder="请输入联系人"></a-input>
          </a-form-item>
          <a-form-item label="联系电话" name="holdPhone">
            <a-input v-model:value="stateForm.holdPhone" placeholder="请输入联系电话"></a-input>
          </a-form-item>
          <a-form-item label="住户姓名" name="holder">
            <a-input v-model:value="stateForm.holder" placeholder="请输入住户姓名"></a-input>
          </a-form-item>
          <a-form-item label="性别" name="sex">
            <a-select ref="select" v-model:value="stateForm.sex" style="width: 178px" placeholder="请选择性别">
              <a-select-option value="男">男</a-select-option>
              <a-select-option value="女">女</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="入网时间" name="netDate">
            <a-input v-model:value="stateForm.netDate" placeholder="请选择入网时间"></a-input>
          </a-form-item>
          <a-form-item label="末端类型" name="endpointType">
            <a-select ref="select" v-model:value="stateForm.endpointType" style="width: 178px" placeholder="请选择末端类型">
              <a-select-option value="地暖辐射">地暖辐射</a-select-option>
              <a-select-option value="散热器">散热器</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
              <a-select-option value="风机盘管">风机盘管</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="阀门类型" name="valveType">
            <a-select ref="select" v-model:value="stateForm.valveType" style="width: 178px" placeholder="请选择阀门类型">
              <a-select-option value="串联阀门">串联阀门</a-select-option>
              <a-select-option value="手动阀">手动阀</a-select-option>
              <a-select-option value="远程控制阀">远程控制阀</a-select-option>
              <a-select-option value="刷卡阀">刷卡阀</a-select-option>
              <a-select-option value="锁闭阀">锁闭阀</a-select-option>
              <a-select-option value="计量阀">计量阀</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="楼梯类型" name="elevatorType">
            <a-input v-model:value="stateForm.elevatorType" placeholder="请选择楼梯类型"></a-input>
          </a-form-item>
          <a-form-item label="入住状态" name="checkIn">
            <a-input v-model:value="stateForm.checkIn" placeholder="请选择入住状态"></a-input>
          </a-form-item>
          <!-- <a-form-item label="供热状态" name="heatingStatus">
            <a-input v-model:value="stateForm.heatingStatus" placeholder="请选择供热状态"></a-input>
          </a-form-item> -->
          <a-form-item label="用户标签">
            <a-input placeholder="请选择用户标签"></a-input>
          </a-form-item>
          <a-form-item label="其他电话" name="otherPhone">
            <a-input v-model:value="stateForm.otherPhone" placeholder="请输入其他电话"></a-input>
          </a-form-item>
          <a-form-item label="备注" name="remark">
            <a-input v-model:value="stateForm.remark" placeholder="请输入备注"></a-input>
          </a-form-item>
        </a-form>
        <a-divider orientation="left">面积信息</a-divider>
        <a-form layout="inline" :label-col="labelCol">
          <a-form-item label="面积名称" name="areaName">
            <a-input v-model:value="stateForm.areaName" placeholder="请输入面积名称"></a-input>
          </a-form-item>
          <a-form-item label="使用类型" name="houseType">
            <a-select ref="select" v-model:value="stateForm.houseType" style="width: 178px" placeholder="请选择使用类型">
              <a-select-option value="居民">居民</a-select-option>
              <a-select-option value="非居民">非居民</a-select-option>
              <a-select-option value="办公">办公</a-select-option>
              <a-select-option value="经营">经营</a-select-option>
            </a-select>
            <!-- 居民 非居民 办公 经营 -->
          </a-form-item>
          <a-form-item label="收费面积" name="feeArea">
            <a-input v-model:value="stateForm.feeArea" placeholder="请输入收费面积"></a-input>
          </a-form-item>
          <a-form-item label="建筑面积" name="buildingArea">
            <a-input v-model:value="stateForm.buildingArea" placeholder="请输入建筑面积"></a-input>
          </a-form-item>
          <a-form-item label="阀门厂家" name="valveManufacturer">
            <a-input v-model:value="stateForm.valveManufacturer" placeholder="请输入阀门厂家"></a-input>
          </a-form-item>
          <a-form-item label="实供面积" name="actualSuppliedArea">
            <a-input v-model:value="stateForm.actualSuppliedArea" placeholder="请输入实供面积"></a-input>
          </a-form-item>
          <a-form-item label="阀门状态" name="valveStatus">
            <a-select ref="select" v-model:value="stateForm.valveStatus" style="width: 178px" placeholder="请选择阀门状态">
              <a-select-option value="开阀">开阀</a-select-option>
              <a-select-option value="关阀">关阀</a-select-option>
            </a-select>
            <!-- 开阀关阀 -->
          </a-form-item>
          <a-form-item label="阀门编号" name="valveNumber">
            <a-input v-model:value="stateForm.valveNumber" placeholder="请输入阀门编号"></a-input>
          </a-form-item>
        </a-form>
        <a-divider orientation="left">合同信息</a-divider>
        <a-form layout="inline" :label-col="labelCol">
          <a-form-item label="附件">
            <a-button>上传</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from 'vue';
import personalDrawer from '../personalDrawer.vue';
import {
  getHouseAreaYSRFTableApi,
  updateNameApi,
  getPayInfoApi,
  getPayRecordApi,
  getRoomDetailApi,
  updateRoomDetailApi,
} from '#/api/core/charge';
import {
  SearchOutlined,
  CodeSandboxOutlined,
  EditOutlined,
} from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { messages } from '../../../../../../../packages/@core/composables/src/use-simple-locale/messages';
import { message } from 'ant-design-vue';

const stateForm = ref({
  name: '',
  village: '',
  building: '',
  unit: '',
  house: '',
  houseName: '',
  alipayConsNo: '',
  holder: '',
  linkman: '',
  holdPhone: '',
  sex: '',
  netDate: '',
  elevatorType: '',
  checkIn: '',
  otherPhone: '',
  houseRemark: '',
  remark: '',
  houseType: '',
  areaName: '',
  feeArea: '',
  buildingArea: '',
  actualSuppliedArea: '',
  endpointType: '',
  valveType: '',
  valveManufacturer: '',
  valveStatus: '',
  valveNumber: '',
  agreementMsg: '',
  heatingStatus: '',
});
const labelCol = { style: { width: '80px' } };
const isEdit = ref(false);
const isRename = ref(false);
const isOrder = ref(false);
const isUserInfo = ref(false);
const isEditInfo = ref(false);
const dataSource = ref([]);
const orderTableData = ref([]);
const houseId = ref();
const name = ref('');
const payInfo = ref();
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});

const columns = [
  {
    title: '小区名称',
    dataIndex: 'village',
    key: 'village',
    align: 'center',
    width: 120,
  },
  {
    title: '小区地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
    width: 150,
  },
  {
    title: '用户姓名',
    dataIndex: 'holder',
    key: 'holder',
    align: 'center',
    width: 100,
  },
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
    width: 120,
  },
  {
    title: '收费期',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
    width: 100,
  },
  {
    title: '面积名称',
    dataIndex: 'areaName',
    key: 'areaName',
    align: 'center',
    width: 100,
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    align: 'center',
    width: 100,
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    align: 'center',
    width: 100,
  },
  {
    title: '应收全费金额',
    dataIndex: 'normalReceivable',
    key: 'normalReceivable',
    align: 'center',
    width: 120,
  },
  {
    title: '应收基本费金额',
    dataIndex: 'heatWasteReceivable',
    key: 'heatWasteReceivable',
    align: 'center',
    width: 120,
  },
  {
    title: '应收减免金额',
    dataIndex: 'receivableDerate',
    key: 'receivableDerate',
    align: 'center',
    width: 120,
  },
  {
    title: '已收金额',
    dataIndex: 'yjTotal',
    key: 'yjTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '实际已收',
    dataIndex: 'realReceiveToal',
    key: 'realReceiveToal',
    align: 'center',
    width: 100,
  },

  {
    title: '折扣金额',
    dataIndex: 'totalDiscountMoney',
    key: 'totalDiscountMoney',
    align: 'center',
    width: 100,
  },
  {
    title: '退款金额',
    dataIndex: 'refundTotal',
    key: 'refundTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '拖欠热费金额',
    dataIndex: 'arrearage',
    key: 'arrearage',
    align: 'center',
    width: 100,
  },
  {
    title: '拖欠金额',
    dataIndex: 'arrearageTotal',
    key: 'arrearageTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '抹零金额',
    dataIndex: 'zeroAmount',
    key: 'zeroAmount',
    align: 'center',
    width: 100,
  },
  {
    title: '已开发票金额',
    dataIndex: '',
    key: '',
    align: 'center',
    width: 120,
  },
  {
    title: '已开收据金额',
    dataIndex: '',
    key: '',
    align: 'center',
    width: 120,
  },
  {
    title: '应收违约金',
    dataIndex: 'lateFeeRealReceive',
    key: 'lateFeeRealReceive',
    align: 'center',
    width: 120,
  },
  {
    title: '违约金减免金额',
    dataIndex: 'lateFeeDerate',
    key: 'lateFeeDerate',
    align: 'center',
    width: 130,
  },
  {
    title: '违约金实收',
    dataIndex: 'lateFeeRealReceive',
    key: 'lateFeeRealReceive',
    align: 'center',
    width: 120,
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    fixed: 'right',
    width: 200,
  },
];
const columns_order = [
  {
    title: '小区名称',
    dataIndex: 'village',
    key: 'village',
    align: 'center',
    width: 120,
  },
  {
    title: '小区地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
    width: 150,
  },
  {
    title: '用户姓名',
    dataIndex: 'holder',
    key: 'holder',
    align: 'center',
    width: 100,
  },
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
    width: 120,
  },
  {
    title: '收费期',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
    width: 100,
  },
  {
    title: '面积名称',
    dataIndex: 'areaName',
    key: 'areaName',
    align: 'center',
    width: 100,
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    align: 'center',
    width: 100,
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    align: 'center',
    width: 100,
  },
  {
    title: '应收全费金额',
    dataIndex: 'normalReceivable',
    key: 'normalReceivable',
    align: 'center',
    width: 120,
  },
  {
    title: '应收基本费金额',
    dataIndex: 'heatWasteReceivable',
    key: 'heatWasteReceivable',
    align: 'center',
    width: 120,
  },
  {
    title: '应收减免金额',
    dataIndex: 'receivableDerate',
    key: 'receivableDerate',
    align: 'center',
    width: 120,
  },
  {
    title: '已收金额',
    dataIndex: 'yjTotal',
    key: 'yjTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '实际已收',
    dataIndex: 'realReceiveToal',
    key: 'realReceiveToal',
    align: 'center',
    width: 100,
  },

  {
    title: '折扣金额',
    dataIndex: 'totalDiscountMoney',
    key: 'totalDiscountMoney',
    align: 'center',
    width: 100,
  },
  {
    title: '退款金额',
    dataIndex: 'refundTotal',
    key: 'refundTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '拖欠热费金额',
    dataIndex: 'arrearage',
    key: 'arrearage',
    align: 'center',
    width: 100,
  },
  {
    title: '拖欠金额',
    dataIndex: 'arrearageTotal',
    key: 'arrearageTotal',
    align: 'center',
    width: 100,
  },
  {
    title: '抹零金额',
    dataIndex: 'zeroAmount',
    key: 'zeroAmount',
    align: 'center',
    width: 100,
  },
  {
    title: '已开发票金额',
    dataIndex: '',
    key: '',
    align: 'center',
    width: 120,
  },
  {
    title: '已开收据金额',
    dataIndex: '',
    key: '',
    align: 'center',
    width: 120,
  },
  {
    title: '应收违约金',
    dataIndex: 'lateFeeRealReceive',
    key: 'lateFeeRealReceive',
    align: 'center',
    width: 120,
  },
  {
    title: '违约金减免金额',
    dataIndex: 'lateFeeDerate',
    key: 'lateFeeDerate',
    align: 'center',
    width: 130,
  },
  {
    title: '违约金实收',
    dataIndex: 'lateFeeRealReceive',
    key: 'lateFeeRealReceive',
    align: 'center',
    width: 120,
  },
];
const payFees = (e: any) => {
  isEdit.value = true;
  getPayInfoApi(e.areaID, e.year).then((res: any) => {
    console.log(res);
    payInfo.value = res;
  });
};
const onRename = (e: any) => {
  isRename.value = true;
  houseId.value = e.houseID;
};
const onOrder = (e: any) => {
  isOrder.value = true;
  getPayRecordApi(e.areaID, e.year).then((res: any) => {
    console.log(res);
    orderTableData.value = res;
  });
};
const setName = () => {
  updateNameApi({ houseID: houseId.value, name: name.value }).then(
    (res: any) => {
      console.log(res);
      if (res) {
        message.success(res);
        onSearch();
      } else {
        message.error('修改失败');
      }
    },
  );
};
const searchForm = reactive({
  year: '',
  alipayConsNo: '',
  holder: '',
});
const onSearch = () => {
  const data = {
    treeData: props.selectedNodeId,
    year: searchForm.year ? dayjs(searchForm.year).format('YYYY') : '',
    alipayConsNo: searchForm.alipayConsNo,
    holder: searchForm.holder,
    page: pagination.current,
    limit: pagination.pageSize,
  };
  if (props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    getHouseAreaYSRFTableApi(data).then((res: any) => {
      console.log(res);
      dataSource.value = res.data;
      pagination.total = res.total;
    });
  }
};
const onInfo = (e: any) => {
  isUserInfo.value = true;
  getRoomDetailApi(e.areaID).then((res: any) => {
    console.log(res);
    stateForm.value = { ...res };
  });
};
const editInfo = () => {
  updateRoomDetailApi(stateForm.value).then((res: any) => {
    console.log(res);
    if (res) {
      message.success(res);
      onInfo(stateForm.value);
      isEditInfo.value = false;
      isUserInfo.value = false;
    } else {
      message.error('修改失败');
    }
  });
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 24px;
}
</style>
